<script setup lang="ts">
// 引入必要的组件和图标
import { Button, Card, TypographyText } from "ant-design-vue";
import { UserOutlined } from "@ant-design/icons-vue";
// import conver from "@/assets/041.png";
import { onMounted, ref } from 'vue'
import { getIcon } from "@/api/assets/assets";

const { Meta } = Card;

const conver = ref<string | undefined>(undefined)
const fetchIcon = async () => {
  try {
    const data = await getIcon(['041.png']);
    conver.value = data['041.png'];
  }
  catch (error) {
    console.error("API 调用错误:", error);
  }
};
onMounted(() => {
  fetchIcon();
});

// 定义数据和样式
const title = "大数据技术基础";
const instructor = "鄂海红";
const imageUrl = conver;
</script>

<template>
  <Card
    hoverable
    style="width: 400px; border-radius: 8px; overflow: hidden; height: 400px"
  >
    <template #cover>
      <img alt="example" style="padding: 20px" :src="imageUrl">
    </template>

    <Meta :title="title" :description="instructor" style="margin-bottom: 10px" />
    <TypographyText type="secondary" style="display: block; margin-bottom: 10px">
      数据科学与大数据技术专业郭海红老师团队与...
    </TypographyText>
    <div style="display: flex; justify-content: space-between; align-items: center">
      <TypographyText type="secondary">
        <UserOutlined type="user" style="margin-right: 4px" />
        40k已学习
      </TypographyText>
      <Button
        type="primary"
        size="small"
        style="border-radius: 4px; background-color: #e6f0ff; color: #4b69f4; border-color: #e6f0ff"
      >
        进入课程
      </Button>
    </div>
  </Card>
</template>

<style scoped>
/* 这里可以定义组件的样式 */
</style>
